<template>
    <div class="profile-page">
        <!-- 用户信息区域 -->
        <div class="user-info" v-if="userInfo">
            <img :src="userInfo.zhjy_info?.dawn_zhjyAvatar || '@images/avatar.jpg'" alt="用户头像" class="user-avatar">
            <div class="user-details">
                <h2 class="user-name">{{ userInfo.base_info?.dawn_name }}</h2>
                <template v-if="userInfo.zhjy_info">
                    <p class="user-points">班级：{{ userInfo.zhjy_info.dawn_zhjyDeptName }}</p>
                    <p class="user-points">学号：{{ userInfo.zhjy_info.dawn_zhjyIStudentId }}</p>
                    <p class="user-points">入学年份：{{ userInfo.zhjy_info.dawn_zhjyEnrollmentYear }}</p>
                </template>
            </div>
        </div>
        <!-- 加载中状态 -->
        <div v-else class="loading-state">
            <div class="loading-spinner"></div>
            <p>加载中...</p>
        </div>
        <!-- 功能导航列表 -->
        <ul class="function-list">
            <li>
                <a href="#">个人信息</a>
            </li>
            <li>
                <a href="#">修改密码</a>
            </li>
            <li>
                <Link href="/user/push">消息通知</Link>
            </li>
            <li>
                <a href="#">系统设置</a>
            </li>
        </ul>
        <!-- 退出登录按钮 -->
        <button @click="logout" class="logout-btn">退出登录</button>
    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import request from '@/utils/request';
import apiUrls from '@/config/apiUrls'; 
import { router, Link } from '@inertiajs/vue3'; 
import {baseNotifyInfo} from '@/utils/utils.js';
import {StatusCodeEnum} from '@/enum/StatusCodeEnum.js';
import RouterPath from '@/constans/RouterPath.js'
import Constan from '@/constans/Constan.js';

const userInfo = ref(null);

onMounted(()=>{
    console.log("加载个人中心")
    getUserInfo()
})

const getUserInfo = async ()=>{
    try {
        const response = await request.post(apiUrls.users.getUserInfo);
        if(response.code === 200){
            userInfo.value = response.data;
        }else{
            baseNotifyInfo('获取用户信息失败');
        }
    } catch (error) {
        console.error('获取用户信息出错：', error);
        baseNotifyInfo('获取用户信息失败');
    }
}

const logout = async ()=>{
    const response = await request.post(apiUrls.users.logout);
    if(response.code === 200){
        baseNotifyInfo(StatusCodeEnum.logout_success());
        router.visit(RouterPath.users.logout) 
    }else{
        baseNotifyInfo(StatusCodeEnum.logout_erro())
    }
}
</script>

<style scoped>
/* 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 个人中心页面整体样式 */
.profile-page {
    padding: 20px;
}

/* 用户信息区域样式 */
.user-info {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.user-points {
    margin: 5px 0 0;
    color: #777;
}

/* 功能导航列表样式 */
.function-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.function-list li {
    border-bottom: 1px solid #eee;
}

.function-list li:last-child {
    border-bottom: none;
}

.function-list li a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

.function-list li a:hover {
    background-color: #f9f9f9;
}

/* 退出登录按钮样式 */
.logout-btn {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #ff4d4f;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logout-btn:hover {
    background-color: #d9363e;
}

/* 添加加载状态样式 */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1E9FFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>    